
<!DOCTYPE html>
<html>
<head>
	<title>Wesmile</title>
	<meta charset="utf-8" />
	<style>
		*{margin:0;padding:0;}
		body{background: #000000;}
		#container {margin-left: auto;margin-right: auto;}
		#container img,#container div { position:absolute; }
		#container div { overflow: hidden;}
		div>img {width:100%;}
		div>span {position: absolute;width:100%;padding:5px 0 8px;background: #000;color:#fff;opacity: 0.6;bottom: 0;font-family: Arial;font-size: 14px;text-align: center;line-height: 1.2;vertical-align: middle;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;display:none;}
		
	</style>
</head>
<body>
	<div id="container" style="width:1280px;height:534px;overflow:hidden;background:#000000;position:relative;">
		
	</div>
	<script type="text/javascript" src="/vendor/mootools/dist/mootools-core.js"></script>
	<script type="text/javascript">
	

		var prefix = "http://www.letsface.cn/hphoto/", 
			ops = {
				iniW:300,
				iniH:300,
				width:128,//image width
				height:128,//image height
				ctnW:1280,//container width
				ctnH:534,//container height
				maxN:32,//the max display number of photoes
				logoNum:0
			}, 
			logoArray = ["/images/wesmile/2015054/logo.jpg","/images/wesmile/2015054/logo.jpg", "/images/wesmile/2015054/logo.jpg", "/images/wesmile/2015054/logo.jpg"],
			flag = {"request":true,"counter":0},//guid the Ajax request
			ctn = $("container");
		var params = getUrlParams();
				event_id = <%= eventId %> || 0,
				ops.maxN = params["maxN"] ? params["maxN"] : ops.maxN;
		var wesmileApi = 'http://120.26.52.45/prod/checkin/framework/src/init/index.php';
		var cmd = {
			base: {event_id: event_id},
			data: {start_time: params['start_time'] || 0},
			route: "wuadian_api_checkin_getHeadPhoto"
		};
		var im = new imgManager();
		var requestSignatures = new Request.JSON({
			url: '/wesmileProxy',
			method: 'get',
			link:'ignore',
			timeout: 5000,
			noCache : true,
			onSuccess: function(obj){
				if(obj && obj.data && obj.data.headPhotos.length > 0 ){
					im.reset(obj.data.headPhotos);
					if(flag.request == true) flag.request = false;
				}
				
				
			}
			
		});

		function getUrlParams(){
			var params = {};
			var url = window.location.href;
			var idx = url.indexOf("?");
			if(idx > 0)
			{
				var queryStr = url.substring(idx + 1);
				var args = queryStr.split("&");
				for(var i = 0, a, nv; a = args[i]; i++)
				{
					nv = args[i] = a.split("=");
					params[nv[0]] = nv.length > 1 ? nv[1] : true;
				}
			}
			return params;
		}	

		function imgManager(){
			var imgArray = [],
				imgs = this.imgs = [],
				logos = this.logos = [];
				loadLogo();
			this.reset = function(arr){
				if(arr.length > 0){
					if(flag.request == true) flag.request = false;
					imgArray = arr;
					load();
				}
			};
			
			this.getFirst = function(){

				var ran = Number.random(0,2);
				if(logos.length == 0 && imgs.length == 0) {
					if(flag.request == false) flag.request = true;					
					return false;
				}
				if(logos.length > 0 && imgs.length > 0){
					if(ran == 0){
						return logos.shift();
					}else{
						return imgs.shift();
					}
					
				}
				if(logos.length == 0 && imgs.length > 0){
					return imgs.shift();
				}
				if(logos.length > 0 && imgs.length == 0){
					return logos.shift();
				}
			};
			this.log = function(){
				console.log(imgs.length);
			};
			function load(){
	
				cmd.data.start_time = imgArray[imgArray.length - 1]["sign_time"];
				for(var i = 0; i < imgArray.length; i++){
					var div = new Element("div");
					var span = new Element("span");
					var img = new Element("img");
					div.grab(img);
					div.grab(span);
					img.onload = function(){
						imgs.push(this.getParent());

					};

					div.set({
						time: imgArray[i]["lasttime"],
						name: imgArray[i]["name"]
					});
					img.set("src",imgArray[i]["imageurlHost"] + imgArray[i]["imageurl"]);
					var name = imgArray[i]["name"] || '<br>';
					span.set("html", name  );
				}			
			}

			function loadLogo(){
			  if(logoArray.length>0){	
				for(var i = 0; i < logoArray.length; i++){
					var image = new Element("img");
					image.onload = function(){
						logos.push(this);
					
					};

					image.set({

						src: logoArray[i],
						name: "logo"
					});
					
				}
				logoArray = [];
			  }	
			}				
			
		}
		
		function locationManager(){
			var totalWidth = ops.ctnW,
				totalHeight = ops.ctnH,
				indivalWidth = ops.width,
				indivalHeight = ops.height,
				
				cols = parseInt(totalWidth/indivalWidth),
				lines = parseInt(totalHeight/indivalHeight),
				offX = parseInt((totalWidth%indivalWidth)/2),
				offY = 0; //parseInt((totalHeight%indivalHeight)/2);
			var locations = this.locations = [];
				for(var i = 0; i < lines; i++){
					for(var j = 0; j < cols; j++){
						var location = {
							"left": offX + indivalWidth*j,
							"top": offY + indivalHeight*i,
							"id": i + '' + j,
							"ocupied": false	
						};
						locations.push(location);	
					}

				} 
				this.log = function(){
					console.log(totalWidth);console.log(totalHeight);console.log(indivalWidth);console.log(indivalHeight);console.log(cols);console.log(lines);console.log(offY);console.log(offX);
					console.log(locations);
				};
				this.dim = function(){
					return {"width":indivalWidth,"height":indivalHeight};
				};
				this.getUnocupied = function(){
					//var length = locations.length;
					if(locations.every(function(location){
							return location.ocupied == true;
					})) return false;
					var r = {};
					do{
						r = locations.getRandom();  
					}
					while(r.ocupied)
					return r;
				};
				this.getOcupied = function(){
					if(locations.every(function(location){
							return location.ocupied == false;
					})) return false;
					var r = {};
					do{
						r = locations.getRandom();
					}while(!r.ocupied)
					return r;
				};
				this.getONum = function(){
					var num = 0;
					locations.each(function(location){
						if(location.ocupied == true)
							num++;
					});
					return num;
				};
				this.clean = function(str){
					locations.each(function(location){
						if(location.id == str)
							location.ocupied = false;
					})
				};

		}
		var myLM = new locationManager();
		var dim = myLM.dim();
		/*
		var coor = myLM.locations.splice(32,3)[0];
		var bottomLogo = new Element('img',{
			src:"images/fwlogo_02.png",
			width:"420",//dim.width*3,
			height:dim.height,
			styles:{
				left:coor.left + "px",
				top:coor.top + 21 + "px"
			}
		});
		ctn.grab(bottomLogo);

		coor = myLM.locations.splice(6,1)[0];
		var topLogo = new Element('img',{
			src:"images/fwlogo_01.png",
			width:dim.width,
			height:dim.height,
			styles:{
				left:coor.left + "px",
				top:coor.top  + "px"
			}
		});
		ctn.grab(topLogo);
		*/
requestSignatures
	.get({api:encodeURIComponent(wesmileApi), data: "cmd="+encodeURIComponent(JSON.encode(cmd))});
		var iniLeft = (ops.ctnW - ops.iniW)/2,
			iniTop = (ops.ctnH - ops.iniW)/2;
		function pulse(){
			setTimeout(pulse, "2000");
			if(flag.counter == 2){
				flag.counter = 0;
				var decache = Math.random();
				if(flag.request == true){
					requestSignatures
						.get({api:encodeURIComponent(wesmileApi), data: "cmd="+encodeURIComponent(JSON.encode(cmd))});
						

				}
			}
			flag.counter ++;

			var newImg = im.getFirst();
			var ONum = myLM.getONum();
			if(newImg){
				$$(".dispose").each(function(el){
					el.destroy();
				});
				if(ONum < ops.maxN){
						
					newImg.setStyles({
						width:ops.iniW + "px",
						height:ops.iniH + "px",
						left:iniLeft + "px",
						top:iniTop + "px"
					});

					ctn.grab(newImg);
					var effect_1 = new Fx.Morph(newImg,{
						duration: 1200,
						transition: Fx.Transitions.Sine.easeOut,
						link: 'chain'
					});
					var coor = myLM.getUnocupied();
					if(coor){
						coor.ocupied = true;
						newImg.set("num",coor.id);
						effect_1.start({
						'left':coor.left,
						'top':coor.top,
						"width":ops.width,
						"height":ops.height
						});
					}

				}else{
				  var outNumber = notLogo();

					var outImg = ctn.children[outNumber];
					var roomNum = outImg.get("num");
					myLM.clean(roomNum);
					outImg.set("class","dispose");
					var effect_outImg = new Fx.Tween(outImg,{
							duration:900,
							transition: Fx.Transitions.linear,
							link: 'chain'
						});
					effect_outImg.start("opacity", "0");
						
					newImg.setStyles({
						width:ops.iniW + "px",
						height:ops.iniH + "px",
						left:iniLeft + "px",
						top:iniTop + "px"
					});
					ctn.grab(newImg);
					var effect_nextImg = new Fx.Morph(newImg,{
						duration: 1200,
						transition: Fx.Transitions.Sine.easeOut,
						link: 'chain'
					});
					var nextCoor = myLM.getUnocupied();
					if(nextCoor){
						nextCoor.ocupied = true;
						newImg.set("num",nextCoor.id);
						effect_nextImg.start({
						'left':nextCoor.left,
						'top':nextCoor.top,
						"width":ops.width,
						"height":ops.height
						});
					}


				}
				
			}else{
				$$(".dispose").each(function(el){
					el.destroy();
				});

				if(ctn.children.length > 0){
					var el_1_idx = Number.random(ops.logoNum, ctn.children.length-1);
					var el_1 = ctn.children[el_1_idx];
					var newCoor = myLM.getUnocupied();
					var oldNumber = el_1.get("num");
					myLM.clean(oldNumber);
					var el_2 = el_1.clone();
					if(newCoor){
						newCoor.ocupied = true;
						el_2.set("num",newCoor.id);
						el_2.setStyles({
						'left':newCoor.left,
						'top': newCoor.top,
						'opacity':"0"
						});
						ctn.grab(el_2);
						el_1.set("class", "dispose");
						var effect_el_1 = new Fx.Morph(el_1,{
						duration:900,
						transition: Fx.Transitions.linear,
						link: 'chain'
						});
					effect_el_1.start({"opacity":"0"});
					var effect_el_2 = new Fx.Morph(el_2,{
						duration:1600,
						transition: Fx.Transitions.linear,
						link: 'chain'
					});
					effect_el_2.start({"opacity":"1"});
					}
			  }
		}

		function notLogo(){
			var type ="",
			num;
			do{
				num = Number.random(ops.logoNum, ctn.children.length - 1);
				type = ctn.children[num].get("name");
			}while(type == "logo")
			return num;	
		}
	}
		pulse();
	</script>
</body>
</html>
